<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 数据请求</title>
</head>
<body>
    <ul id="members"></ul>
    <script>
        // js 异步主动请求数据 界面的动态更新
        // console.log(fetch('https://api.github.com/orgs/lemoncode/members'));
        // url 接口地址
        // 网络请求 request
        // response 
        // toJSON
        // dom
        // httpRequest XML？ 可以主动发起http 请求响应是(XML)JSON 的对象
        const xhr = new XMLHttpRequest(); 
        // 打开一个请求
        // false同步请求 trur 异步请求
        console.log(xhr.readyState,'------')
        xhr.open('GET','https://api.github.com/orgs/lemoncode/members',false);
        // 真正发送请求出去
        console.log(xhr.readyState,'------')
        xhr.send();
        console.log(xhr.readyState,'------')
        // 事件监听
        console.log('//////');
        console.log(xhr.responseText);
        //  xhr.onreadystatechange = function(event) {
        //     console.log(xhr.readyState,'------')
        //     // 响应的状态码
        //     // readyState 4 表示请求完成
        //     if (xhr.status === 200 && xhr.readyState === 4){
        //         console.log(xhr.responseText);
        //         const data = JSON.parse(xhr.responseText);
        //         console.log(data);
        //         document.getElementById('members').innerHTML = data.map(item => `<li>${item.login}</li>`).join('');
        //     }
        // }
    </script>
</body>
</html>